<template>
  <div>
    <el-form :model="searchForm" inline>
      <el-form-item label="状态">
        <el-select placeholder="选择状态" v-model="searchForm.status" clearable>
          <el-option :value="1" label="可用"/>
          <el-option :value="2" label="禁用"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getDataList">查询</el-button>
        <el-button @click="openWin()">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" border>
      <el-table-column prop="bannerId" label="编号" align="center"/>
      <el-table-column prop="bannerName" label="广告名称" align="center"/>
      <el-table-column prop="bannerUrl" label="广告图片" align="center">
        <template slot-scope="scope">
          <div style="height: 100px;width: 100px;margin: 0 auto;">
            <img :src="baseImgUrl+scope.row.bannerUrl" height="100%" width="100%" alt="" title="点击查看原图" @click="showImageDetail(scope.row.bannerUrl)">
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1" type="success">可用</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="openWin(scope.row.bannerId)">修改</el-button>
          <el-button size="small" type="warning" @click="deleteInfo(scope.row.bannerId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-if="total > searchForm.limit" :current-page="searchForm.page" :page-size="searchForm.limit" :total="total" :page-sizes="[5,10,20,30,50,100]" layout="total,sizes,prev,pager,next,jumper" @current-change="currentChange" @size-change="sizeChange"></el-pagination>

    <BannerUpdate ref="bannerUpdate" @closeWin="getDataList"/>

    <el-dialog title="查看图片" :visible.sync="imageDialogVisible" v-if="imageDialogVisible" append-to-body>
      <img :src="showImageSrc" alt="" height="100%" width="100%">
    </el-dialog>
  </div>
</template>

<script>
import BannerUpdate from '@/views/admin/banner/BannerUpdate.vue'

export default {
  name: 'BannerList',
  components: { BannerUpdate },
  data () {
    return {
      searchForm: {
        status: '',
        page: 1,
        limit: 5
      },
      dataList: [],
      total: 0,
      baseImgUrl: process.env.VUE_APP_API + 'img/',
      imageDialogVisible: false,
      showImageSrc: ''
    }
  },
  methods: {
    currentChange (value) {
      this.searchForm.page = value
      this.getDataList()
    },
    sizeChange (value) {
      this.searchForm.limit = value
      this.getDataList()
    },
    openWin (bannerId) {
      this.$refs.bannerUpdate.init(bannerId)
    },
    deleteInfo (bannerId) {
      this.$confirm(`确定删除编号[${bannerId}]的数据吗？`, { type: 'info' }).then(() => {
        this.$http.delete(`admin/banner/delete/${bannerId}`).then(() => {
          this.$alert('删除成功', { type: 'success' }).then(() => {
            this.getDataList()
          })
        })
      })
    },
    getDataList () {
      this.$http.get('admin/banner/page', this.searchForm).then(data => {
        this.dataList = data.data.records
        this.searchForm.page = data.data.current
        this.searchForm.limit = data.data.size
        this.total = data.data.total
      })
    },
    showImageDetail (bannerUrl) {
      this.imageDialogVisible = true
      this.showImageSrc = this.baseImgUrl + bannerUrl
    }
  },
  created () {
    this.getDataList()
  }
}
</script>

<style scoped>

</style>
